<template>
  <div class="admin-dashboard">
    <!-- 欢迎横幅 -->
    <div class="welcome-banner">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1 class="page-title">系统管理总览</h1>
          <p class="page-subtitle">实时监控系统运行状态和数据统计</p>
          <div class="system-info">
            <el-tag type="success" size="small">系统运行正常</el-tag>
            <el-tag type="info" size="small">{{ dashboardData.totalStats?.totalUsers || 0 }} 位用户</el-tag>
          </div>
        </div>
        <div class="welcome-actions">
          <el-button type="primary" @click="refreshData" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button @click="goToReviewCenter">
            <el-icon><Check /></el-icon>
            审核中心
          </el-button>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row" v-loading="loading">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon pending">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ dashboardData.pendingStats?.totalPending || 0 }}</h3>
              <p>待审核项目</p>
              <span class="stat-detail">需要处理</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon monthly">
              <el-icon><Plus /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ dashboardData.monthlyStats?.totalMonthlyNew || 0 }}</h3>
              <p>本月新增</p>
              <span class="stat-detail">项目数量</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon projects">
              <el-icon><FolderOpened /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ (dashboardData.totalStats?.totalTeachingProjects || 0) + (dashboardData.totalStats?.totalResearchProjects || 0) }}</h3>
              <p>总项目数</p>
              <span class="stat-detail">累计管理</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon users">
              <el-icon><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ dashboardData.totalStats?.totalUsers || 0 }}</h3>
              <p>系统用户</p>
              <span class="stat-detail">注册用户</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据图表和列表 -->
    <el-row :gutter="20" class="content-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span><el-icon><PieChart /></el-icon> 项目类型分布</span>
              <el-button size="small" @click="refreshChart" :loading="chartLoading">
                <el-icon><Refresh /></el-icon> 刷新
              </el-button>
            </div>
          </template>
          <div class="chart-container">
            <div v-if="dashboardData.projectDistribution" class="distribution-stats">
              <div class="distribution-section">
                <h4>教学项目</h4>
                <div class="distribution-items">
                  <div v-for="(count, type) in dashboardData.projectDistribution.teachingProjects" :key="type" class="distribution-item">
                    <span class="type-name">{{ type }}</span>
                    <el-tag type="primary" size="small">{{ count }}</el-tag>
                  </div>
                </div>
              </div>
              <div class="distribution-section">
                <h4>科研项目</h4>
                <div class="distribution-items">
                  <div v-for="(count, type) in dashboardData.projectDistribution.researchProjects" :key="type" class="distribution-item">
                    <span class="type-name">{{ type }}</span>
                    <el-tag type="success" size="small">{{ count }}</el-tag>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="chart-placeholder">
              <el-icon size="48" color="#ddd"><PieChart /></el-icon>
              <p style="color: #999; margin-top: 16px;">暂无数据</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span><el-icon><Bell /></el-icon> 最近活动</span>
              <el-badge :value="dashboardData.recentActivities?.length || 0" type="primary">
                <el-button size="small" type="text">查看全部</el-button>
              </el-badge>
            </div>
          </template>
          <div class="activity-list">
            <div v-if="dashboardData.recentActivities?.length > 0">
              <div v-for="activity in dashboardData.recentActivities.slice(0, 6)" :key="activity.title + activity.time" class="activity-item">
                <div class="activity-content">
                  <div class="activity-header">
                    <el-tag :type="getActivityTypeColor(activity.type)" size="small">{{ activity.type }}</el-tag>
                    <span class="activity-time">{{ formatTime(activity.time) }}</span>
                  </div>
                  <h4 class="activity-title">{{ activity.title }}</h4>
                  <p class="activity-user">提交人：{{ activity.user }}</p>
                </div>
                <div class="activity-status">
                  <el-tag :type="getStatusType(activity.status)" size="small">{{ activity.status }}</el-tag>
                </div>
              </div>
            </div>
            <div v-else class="empty-state">
              <el-empty description="暂无最近活动" :image-size="80" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="goToReviewCenter">
              <el-icon><Check /></el-icon>
              审核中心
            </el-button>
            <el-button type="success" @click="goToProjectManagement">
              <el-icon><FolderOpened /></el-icon>
              项目管理
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
                  

    <!-- 系统状态监控 -->
    <el-row :gutter="20" style="margin-top: 24px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>系统运行状态</span>
          </template>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="status-item">
                <div class="status-label">CPU使用率</div>
                <el-progress :percentage="systemStatus.cpu" :color="getProgressColor(systemStatus.cpu)" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div class="status-label">内存使用率</div>
                <el-progress :percentage="systemStatus.memory" :color="getProgressColor(systemStatus.memory)" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="status-item">
                <div class="status-label">磁盘使用率</div>
                <el-progress :percentage="systemStatus.disk" :color="getProgressColor(systemStatus.disk)" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import {
  Clock, Plus, UserFilled, Bell, PieChart, Check, FolderOpened, Refresh
} from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const chartLoading = ref(false)
const dashboardData = ref({})

// 获取管理员仪表板数据
const fetchDashboardData = async () => {
  loading.value = true
  try {
    const response = await request.get('/api/dashboard/admin/overview')
    dashboardData.value = response
  } catch (error) {
    console.error('获取管理员仪表板数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = async () => {
  await fetchDashboardData()
  ElMessage.success('数据已刷新')
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)
  
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return date.toLocaleDateString()
}

// 获取活动类型颜色
const getActivityTypeColor = (type) => {
  const colors = {
    '教学项目': 'primary',
    '科研项目': 'success',
    '奖项': 'warning',
    '活动': 'info'
  }
  return colors[type] || 'info'
}

// 获取状态类型
const getStatusType = (status) => {
  const types = {
    '已通过': 'success',
    '审核中': 'warning',
    '待审核': 'info',
    '已拒绝': 'danger',
    '进行中': 'primary',
    '已完成': 'success'
  }
  return types[status] || 'info'
}

// 系统状态
const systemStatus = reactive({
  cpu: 65,
  memory: 78,
  disk: 45
})

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

// 刷新图表
const refreshChart = async () => {
  chartLoading.value = true
  try {
    await fetchDashboardData()
    ElMessage.success('图表数据已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  } finally {
    chartLoading.value = false
  }
}

// 快速导航方法
const goToReviewCenter = () => {
  router.push('/admin/review')
}

const goToProjectManagement = () => {
  router.push('/admin/projects')
}



// 组件挂载时初始化
onMounted(() => {
  fetchDashboardData()
})
</script>

<style scoped>
.admin-dashboard {
  max-width: 1200px;
}

.welcome-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text .page-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}

.welcome-text .page-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin: 0 0 16px 0;
}

.system-info {
  display: flex;
  gap: 8px;
}

.welcome-actions {
  display: flex;
  gap: 12px;
}

.welcome-actions .el-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.welcome-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.welcome-actions .el-button--primary {
  background: rgba(255, 255, 255, 0.9);
  color: #667eea;
  border-color: transparent;
}

.welcome-actions .el-button--primary:hover {
  background: white;
  color: #667eea;
}

.chart-container {
  height: 280px;
}

/* 活动列表样式 */
.activity-list {
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

.activity-item:hover {
  background-color: #fafafa;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 8px;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

.activity-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.activity-user {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.activity-status {
  margin-left: 16px;
}

/* 分布统计样式 */
.distribution-stats {
  padding: 16px 0;
}

.distribution-section {
  margin-bottom: 24px;
}

.distribution-section:last-child {
  margin-bottom: 0;
}

.distribution-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.distribution-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distribution-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.distribution-item:hover {
  background: #e9ecef;
}

.type-name {
  font-size: 13px;
  color: #666;
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.card-header .el-icon {
  margin-right: 8px;
  color: #667eea;
}

.quick-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.quick-actions .el-button {
  min-width: 120px;
}

.chart-placeholder {
  text-align: center;
  padding: 40px 20px;
}

/* 空状态样式 */
.empty-state {
  padding: 20px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .stats-row .el-col {
    margin-bottom: 16px;
  }
  
  .content-row .el-col {
    margin-bottom: 20px;
  }
  
  .distribution-items {
    gap: 6px;
  }
  
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .activity-status {
    margin-left: 0;
  }
}

/* 加载动画 */
.el-loading-mask {
  border-radius: 12px;
}

/* 卡片阴影优化 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.status-item {
  margin-bottom: 20px;
}

.status-label {
  margin-bottom: 12px;
  font-weight: 500;
  color: #333;
}

.el-list-item {
  padding: 16px 0;
  border-bottom: 1px solid #ebeef5;
}

.el-list-item:last-child {
  border-bottom: none;
}

/* 统计卡片样式 */
.stats-row {
  margin-bottom: 32px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
}

.stat-info h3 {
  margin: 0 0 4px 0;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.stat-info p {
  margin: 0 0 4px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.stat-detail {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.stat-icon.monthly {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
}

.stat-icon.projects {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.users {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
</style>